<template>
  <ul class="menu fx-h-c" :style="styles">
    <li
      class="menu-item"
      v-for="(item, index) in menuList"
      :key="item"
      @click="handleClick(index)"
    >
      <span class='cs' :class="{ active: i == index }">{{ item }}</span>
    </li>
  </ul>
</template>

<script>
import { setSessionStorage, getSessionStorage } from "@/utils/utils";
export default {
  name: "Menu",
  props: {
    menuList: {
      type: Array,
      default: () => [],
    },
    styles: {
      type: Object,
      default: () => {},
    },
    i: {
      type: [Number, String],
      default: 0
    }
  },
  data() {
    return {
      activeIndex: getSessionStorage('cmActiveIndex')|| 0,
    };
  },
  methods: {
    handleClick(i) {
      this.$emit('changeActiveIndex', i)
    },
  },
};
</script>

<style lang="scss" scoped>
$cm-color: #007fff;
.menu {
  .menu-item {
    margin-right: 3rem;
    span {
      &:hover {
        color: $cm-color;
      }
    }
    .active {
      color: $cm-color;
    }
  }
}
</style>